<template>
  <div>
    <h4>...在...之前</h4>
    <div>2018-10-05 是否在 2018-10-05 之前: {{ dayjs('2018-10-05').isBefore(dayjs('2018-10-05')) }}</div>
    <div>2018-10-05 是否在 2018-10-06 之前: {{ dayjs('2018-10-05').isBefore(dayjs('2018-10-06')) }}</div>
    <div>2018-10-05 是否在 2018-10-04 之前: {{ dayjs('2018-10-05').isBefore(dayjs('2018-10-04')) }}</div>
    <div>2018-10-05 是否在 2013-06-01 之前: {{ dayjs('2018-10-05').isBefore(dayjs('2013-06-01')) }}</div>
    <h4>...在...之后</h4>
    <div>2017-09-02 是否在 2017-09-03 之后: {{ dayjs('2017-09-02').isAfter(dayjs('2017-09-03')) }}</div>
    <div>2017-09-02 是否在 2017-09-02 之后: {{ dayjs('2017-09-02').isAfter(dayjs('2017-09-02')) }}</div>
    <div>2017-09-03 是否在 2017-09-02 之后: {{ dayjs('2017-09-03').isAfter(dayjs('2017-09-02')) }}</div>
    <h4>相等</h4>
    <div>2017-09-03 与 2017-09-02 是否同一年: {{ dayjs('2017-09-03').isSame('2017-09-02', 'year') }}</div>
    <div>2017-09-03 与 2017-09-02 是否同一月: {{ dayjs('2017-09-03').isSame('2017-09-02', 'month') }}</div>
    <div>2017-09-03 与 2017-09-02 是否同一天: {{ dayjs('2017-09-03').isSame('2017-09-02', 'date') }}</div>
    <div>2017-09-03 与 2017-09-03 是否同一天: {{ dayjs('2017-09-03').isSame('2017-09-03', 'date') }}</div>
    <h4>...与...日期相等或在之后</h4>
    <div>2017-09-03 与 2017-09-02 相等或在之后: {{ dayjs('2017-09-03').isSameOrAfter('2017-09-02') }}</div>
    <div>2017-09-03 与 2017-09-03 相等或在之后: {{ dayjs('2017-09-03').isSameOrAfter('2017-09-03') }}</div>
    <div>2017-09-03 与 2017-09-04 相等或在之后: {{ dayjs('2017-09-03').isSameOrAfter('2017-09-04') }}</div>
    <h4>...与...日期相等或在之前</h4>
    <div>2017-09-03 与 2017-09-02 相等或在之前: {{ dayjs('2017-09-03').isSameOrBefore('2017-09-02') }}</div>
    <div>2017-09-03 与 2017-09-03 相等或在之前: {{ dayjs('2017-09-03').isSameOrBefore('2017-09-03') }}</div>
    <div>2017-09-03 与 2017-09-04 相等或在之前: {{ dayjs('2017-09-03').isSameOrBefore('2017-09-04') }}</div>
    <h4>...是否在特定日期范围</h4>
    <h5>isBetween默认既不包头，也不包尾</h5>
    <div>
      2017-09-03 在 [2017-09-01, 2017-09-04] 这个范围:
      {{ dayjs('2017-09-03').isBetween('2017-09-01', '2017-09-04') }}
    </div>
    <div>
      2017-09-02 在 [2017-09-01, 2017-09-04] 这个范围:
      {{ dayjs('2017-09-02').isBetween('2017-09-01', '2017-09-04') }}
    </div>
    <div>
      2017-09-01 在 [2017-09-01, 2017-09-04] 这个范围:
      {{ dayjs('2017-09-01').isBetween('2017-09-01', '2017-09-04') }}
    </div>
    <div>
      2017-09-04 在 [2017-09-01, 2017-09-04] 这个范围:
      {{ dayjs('2017-09-04').isBetween('2017-09-01', '2017-09-04') }}
    </div>
    <div>
      2017-08-20 在 [2017-09-01, 2017-09-04] 这个范围:
      {{ dayjs('2017-08-20').isBetween('2017-09-01', '2017-09-04') }}
    </div>
    <div>
      2017-09-20 在 [2017-09-01, 2017-09-04] 这个范围:
      {{ dayjs('2017-09-20').isBetween('2017-09-01', '2017-09-04') }}
    </div>
    <h5>isBetween通过第四个参数，让其包头包尾</h5>
    <div>
      2017-09-03 在 [2017-09-01, 2017-09-04] 这个范围:
      {{ dayjs('2017-09-03').isBetween('2017-09-01', '2017-09-04', null, '[]') }}
    </div>
    <div>
      2017-09-02 在 [2017-09-01, 2017-09-04] 这个范围:
      {{ dayjs('2017-09-02').isBetween('2017-09-01', '2017-09-04', null, '[]') }}
    </div>
    <div>
      2017-09-01 在 [2017-09-01, 2017-09-04] 这个范围:
      {{ dayjs('2017-09-01').isBetween('2017-09-01', '2017-09-04', null, '[]') }}
    </div>
    <div>
      2017-09-04 在 [2017-09-01, 2017-09-04] 这个范围:
      {{ dayjs('2017-09-04').isBetween('2017-09-01', '2017-09-04', null, '[]') }}
    </div>
    <div>
      2017-08-20 在 [2017-09-01, 2017-09-04] 这个范围:
      {{ dayjs('2017-08-20').isBetween('2017-09-01', '2017-09-04', null, '[]') }}
    </div>
    <div>
      2017-09-20 在 [2017-09-01, 2017-09-04] 这个范围:
      {{ dayjs('2017-09-20').isBetween('2017-09-01', '2017-09-04', null, '[]') }}
    </div>
    <h5>isBetween通过第四个参数，让其包头不包尾</h5>
    <div>
      2017-09-03 在 [2017-09-01, 2017-09-04] 这个范围:
      {{ dayjs('2017-09-03').isBetween('2017-09-01', '2017-09-04', null, '[)') }}
    </div>
    <div>
      2017-09-02 在 [2017-09-01, 2017-09-04] 这个范围:
      {{ dayjs('2017-09-02').isBetween('2017-09-01', '2017-09-04', null, '[)') }}
    </div>
    <div>
      2017-09-01 在 [2017-09-01, 2017-09-04] 这个范围:
      {{ dayjs('2017-09-01').isBetween('2017-09-01', '2017-09-04', null, '[)') }}
    </div>
    <div>
      2017-09-04 在 [2017-09-01, 2017-09-04] 这个范围:
      {{ dayjs('2017-09-04').isBetween('2017-09-01', '2017-09-04', null, '[)') }}
    </div>
    <div>
      2017-08-20 在 [2017-09-01, 2017-09-04] 这个范围:
      {{ dayjs('2017-08-20').isBetween('2017-09-01', '2017-09-04', null, '[)') }}
    </div>
    <div>
      2017-09-20 在 [2017-09-01, 2017-09-04] 这个范围:
      {{ dayjs('2017-09-20').isBetween('2017-09-01', '2017-09-04', null, '[)') }}
    </div>
    <h5>isBetween通过第四个参数，让其不包头,但包尾</h5>
    <div>
      2017-09-03 在 [2017-09-01, 2017-09-04] 这个范围:
      {{ dayjs('2017-09-03').isBetween('2017-09-01', '2017-09-04', null, '(]') }}
    </div>
    <div>
      2017-09-02 在 [2017-09-01, 2017-09-04] 这个范围:
      {{ dayjs('2017-09-02').isBetween('2017-09-01', '2017-09-04', null, '(]') }}
    </div>
    <div>
      2017-09-01 在 [2017-09-01, 2017-09-04] 这个范围:
      {{ dayjs('2017-09-01').isBetween('2017-09-01', '2017-09-04', null, '(]') }}
    </div>
    <div>
      2017-09-04 在 [2017-09-01, 2017-09-04] 这个范围:
      {{ dayjs('2017-09-04').isBetween('2017-09-01', '2017-09-04', null, '(]') }}
    </div>
    <div>
      2017-08-20 在 [2017-09-01, 2017-09-04] 这个范围:
      {{ dayjs('2017-08-20').isBetween('2017-09-01', '2017-09-04', null, '(]') }}
    </div>
    <div>
      2017-09-20 在 [2017-09-01, 2017-09-04] 这个范围:
      {{ dayjs('2017-09-20').isBetween('2017-09-01', '2017-09-04', null, '(]') }}
    </div>
    <br />
  </div>
</template>

<script setup>
import dayjs from 'dayjs'
import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'
import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
import isBetween from 'dayjs/plugin/isBetween'

import 'dayjs/locale/zh-cn'

dayjs.locale('zh-cn')
dayjs.extend(isSameOrAfter)
dayjs.extend(isSameOrBefore)
dayjs.extend(isBetween)
</script>
